Handlebars

Ember templates are powered by the Handlebars templating language. A Handlebars template is a block of HTML that has Handlebars expressions that look like {{ brick_color }}. In this example, "brick_color" will print out the contents of the "brick_color" variable.

Handlebars is a standalone templating language that can be used outside of Ember. With the following HTML:

<div id="brick-container"></div>

<script id="brick-template" type="text/x-handlebars-template">
    <div class="brick">
        <h1>{{name}}</h1>
        <div class="desc">
            {{description}}
        </div>
    </div>
</script>

The following JavaScript will get the template, compile it, call the template with data, and update brick-container element with the resulting HTML:

// get template from HTML
var brickContainer = document.querySelector( '#brick-container' );
var brickTemplate = document.querySelector( '#brick-template' );

// compile source template into a template function
var template = Handlebars.compile( brickTemplate.innerHTML );

// the app's data
var context = {name: 'Red Brick', description: 'A colored brick that can be used to...'};

// build the HTML template with the supplied data
var html = template(context);

// fill the page with content
brickContainer.innerHTML = html;

Handlebars is a rich templating language, featuring:

Next Concept